<template>
  <div class="box">
    <div class="maincont">
      <el-row type="flex" justify="space-between">
        <el-col :span="5">
          <router-link :to="{path:expinfo.userId==($getStorage('userinfo')&&$getStorage('userinfo').id)?'/main/MyHome/myall':'/main/herhome/myall',query:{id:expinfo.userId}}">
            <el-avatar
              size="medium"
              :src="expinfo.headImg"
              class="img"
            ></el-avatar>
            <span class="username">{{ expinfo.author }}</span>
          </router-link>
        </el-col>
        <el-col :span="8" class="time">{{
          expinfo.createTime
        }}</el-col>
      </el-row>
      <h3>
        {{ expinfo.title }}
        <span v-for="item2 in expinfo.label" :key="item2">{{ item2 }}</span>
      </h3>
      <div v-if="!expinfo.isZhangkai">
        <div>
          <div class="text" v-html="expinfo.content"></div>
        </div>
        <div class="zhankai" @click="zhankai(expinfo.id)">
          展开<span>(展开可显示图片)</span>
        </div>
      </div>
      <div v-else>
        <div>
          <div class="text2" v-html="expinfo.content"></div>
          <div class="imgBox" v-if="expinfo.imgArr.length > 0">
            <div v-for="(item, index) in expinfo.imgArr" :key="index">
              <img :src="item" alt="" />
            </div>
          </div>
          <div class="zhankai" @click="shouqi(expinfo.id)">
            收起<span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="botcont">
      <el-row>
        <el-col :span="2" style="width:100px" @click.native="dianZan(expinfo.id)">
          <span :class="expinfo.isLike ? 'yuan wi ri-bg' : 'yuan wi gri-bg'"
            ><i class="iconfont icon-31dianzan"></i></span
          ><span>{{ expinfo.likeNum }}</span>
        </el-col>
        <el-col :span="2" style="width:100px">
          <span :class="expinfo.isZhangkai ? 'yuan wi gi-bg' : 'yuan wi gri-bg'"
            ><i class="iconfont icon-kanguo"></i></span
          ><span>{{ expinfo.viewNum }}</span>
        </el-col>
        <el-col :span="2" style="width:100px" @click.native="showCom(expinfo.id)">
          <span :class="expinfo.isPinglun ? 'yuan wi bi-bg' : 'yuan wi gri-bg'"
            ><i class="iconfont icon-pinglun"></i></span
          ><span>{{ expinfo.remarkNum }}</span>
        </el-col>
        <el-col :span="2" @click.native="shoucang(expinfo.id)">
          <span v-show="!expinfo.isCollection" class="yuan yi big"
            ><i class="iconfont icon-shoucang3"></i></span
          ><span></span>
          <span v-show="expinfo.isCollection" class="yuan yi big"
            ><i class="iconfont icon-shoucang2"></i></span
          ><span></span>
        </el-col>
        <el-col :span="2">
          <span class="yuan ri big"><i class="iconfont icon-fenxiang"></i></span
          ><span></span>
        </el-col>
        <!-- 删除经验 -->
        <el-col :span="4" v-if="showDel == true" :offset="8">
          <el-button type="primary" @click="del(expinfo.id)">删除</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-show="expinfo.isShowCom">
      <div
        v-for="(item, index) in expinfo.remark"
        :key="item.id"
        :class="index != 0 ? 'comItem topline' : 'comItem'"
      >
        <el-row>
          <el-col :span="17" class="comleft">
            <router-link :to="{path:'/main/herhome/myall',query:{id:item.userId}}">
            <el-avatar :src="item.headImg" class="img"></el-avatar>
            </router-link>
            <div>
              <p>
                <span class="name">{{ item.nickname + ":" }}</span
                ><span class="content">{{ item.content }}</span>
              </p>
              <p class="time">{{ item.createTime }}</p>
            </div>
          </el-col>
          <!-- 删除-->
          <el-col
            :span="2"
            class="pinlun"
            v-if="item.userId == $getStorage('userinfo').id"
          >
            <span class="bi" @click="delRemark(item.remarkId)">删除</span>
          </el-col>
          <!-- 回复 -->
          <el-col :span="2" class="pinlun">
            <span class="bi" @click="showRemark(expinfo.id, item.remarkId)"
              >回复</span
            >
          </el-col>
          <!-- 点赞评论 -->
          <el-col
            :span="2"
            class="dianzan2"
            style="width:100px"
            @click.native="addLike(item.remarkId, item.isLike)"
          >
            <span :class="item.isLike ? 'yuan wi ri-bg' : 'yuan wi gri-bg'"
              ><i class="iconfont icon-31dianzan"></i></span
            ><span>{{ item.likeNum }}</span>
          </el-col>
          <!-- 展开回复按钮 -->
          <el-col :span="24" class="remark" v-if="item.replyNum > 0">
            <p
              v-if="!item.isShowRemark"
              @click="openRemark(expinfo.id, item.remarkId)"
            >
              ---展开{{ item.replyNum }}条回复<i class="el-icon-arrow-down"></i>
            </p>
            <p v-else @click="openRemark(expinfo.id, item.remarkId)">
              ---折叠{{ item.replyNum }}条回复<i class="el-icon-arrow-up"></i>
            </p>
          </el-col>
          <!-- 二级评论 -->
          <el-col :span="24" v-if="item.isShowRemark">
            <el-row>
              <div
                v-for="(item, index) in secRemark"
                :key="item.id"
                :class="index != 0 ? 'comItem topline' : 'comItem'"
              >
                <el-row>
                  <el-col :span="20" class="comleft">
                    <router-link :to="{path:'/main/herhome/myall',query:{id:item.userId}}">
                    <el-avatar :src="item.headImg" class="img"></el-avatar>
                    </router-link>
                    <div>
                      <p>
                        <span class="name">{{ item.nickname + ":" }}</span
                        ><span class="content">{{ item.content }}</span>
                      </p>
                      <p class="time">{{ item.createTime }}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-row>
          </el-col>
          <!-- 回复一级评论 -->
          <el-col :span="24" v-if="item.inputRemark">
            <el-row>
              <el-col :span="20">
                <el-input v-model="input2" placeholder="评论..."></el-input>
              </el-col>
              <el-col :span="4">
                &nbsp;<el-button
                  type="primary"
                  plain
                  @click="replyRemark(item.remarkId)"
                  >回复</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="5" class="jiazai">
          <p v-if="expinfo.count == (expinfo.remark && expinfo.remark.length)">
            已加载全部
          </p>
          <p v-else @click="moreRemark">
            加载更多<i class="el-icon-arrow-down"></i>
          </p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-input v-model="input" placeholder="评论..."></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="remark">发表评论</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ["expinfo", "myIndex", "showDel"],
  inject: ["reload"],
  data() {
    return {
      input: "",
      input2: null,
      secRemark: [],
    };
  },
  methods: {
    dianZan(id) {
      this.$emit("changeItem", { id: id, key: "isLike" });
    },
    shouqi(id) {
      this.$emit("changeItem", { id: id, key: "isZhangkai", value: false });
    },
    zhankai(id) {
      this.$emit("changeItem", { id: id, key: "isZhangkai", value: true });
    },
    shoucang(id) {
      this.$emit("changeItem", { id: id, key: "isShouCang" });
    },
    showCom(id) {
      this.$emit("changeItem", { id: id, key: "isShowCom", page: 1 });
    },
    //显示回复输入框
    showRemark(id, remarkId) {
      this.$emit("changeItem", { id: id, key: "showRemark", remarkId });
    },
    //显示二级评论
    openRemark(id, remarkId) {
      this.$axios({
        url: "/remark/select",
        method: "post",
        data: this.$qs.stringify({
          experienceId: this.expinfo.id,
          remarkId,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.secRemark = res.data;
        }
      });
      this.$emit("changeItem", { id: id, key: "openRemark", remarkId });
    },
    //评论
    remark() {
      if (this.input.trim() == "") {
        this.$message({
          message: "未输入内容",
          type: "warning",
        });
        return;
      }
      // console.log("评论");
      let { nickname, headImg, id } = this.$getStorage("userinfo");
      new Promise((resolve, reject) => {
        //添加一级评论
        this.$axios({
          url: "/remark/add",
          method: "post",
          data: this.$qs.stringify({
            content: this.input,
            experienceId: this.expinfo.id,
            userHeadImg: headImg,
            userId: id,
            userNickname: nickname,
          }),
        }).then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.input = "";
            resolve(1);
            this.$emit('changeExpList',{...this.expinfo,remarkNum:res.count},this.myIndex)
          }
        });
      }).then((res) => {
        let page =1;
        
        // 查询一级评论
        this.$emit("changeItem", {
          id: this.expinfo.id,
          key: "isShowCom",
          value: true,
          page,
        });
        
      });
    },
    //二级回复
    replyRemark(pid) {
      if (this.input2.trim() == "") {
        this.$message({
          message: "未输入内容",
          type: "warning",
        });
        return;
      }
      let { nickname, headImg, id } = this.$getStorage("userinfo");
      this.$axios({
        url: "/remark/add",
        method: "post",
        data: this.$qs.stringify({
          content: this.input2,
          experienceId: this.expinfo.id,
          userHeadImg: headImg,
          userId: id,
          pid,
          userNickname: nickname,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.input2 = "";
          this.showRemark(this.expinfo.id, pid);
          //修改数据
          let obj = this.expinfo;
          obj.remark.forEach((item) => {
            if (item.remarkId == pid) {
              item.replyNum = item.replyNum + 1;
              this.openRemark(this.expinfo.id, pid);
            }
          });
          this.$emit("changeExpList", obj, this.myIndex);
        }
      });
    },
    //分页加载评论
    moreRemark() {
      let a = this.expinfo.remarkPage + 1;
      this.$emit("changeItem", {
        id: this.expinfo.id,
        key: "moreRemark",
        value: true,
        page: a,
      });
    },
    //添加评论点赞
    addLike(remarkId, isLike) {
      console.log(remarkId, isLike);
      this.$axios({
        url: "/remark/likeOrUnlike",
        method: "post",
        data: this.$qs.stringify({
          remarkId,
          num: isLike ? -1 : 1,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let obj = this.expinfo;
          obj.remark.forEach((item) => {
            if (item.remarkId == remarkId) {
              item.likeNum = isLike ? item.likeNum - 1 : item.likeNum + 1;
              item.isLike = !item.isLike;
            }
          });
          this.$emit("changeExpList", obj, this.myIndex);
        }
      });
    },
    //删除评论
    delRemark(id) {
      this.$axios({
        url: "/remark/delete",
        method: "post",
        data: this.$qs.stringify({
          id,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          //改变数量
           this.$emit('changeExpList',{...this.expinfo,remarkNum:res.remarkNum},this.myIndex)
           let obj1=this.expinfo.remark
          let obj =obj1.filter((item) => {
            return item.remarkId!=id
          });
          this.$emit("changeExpList", {...this.expinfo,remark:obj}, this.myIndex);
          
        }
      });
    },
    //删除经验
    del(id) {
      this.$axios({
        url: "/experience/delete",
        method: "post",
        data: this.$qs.stringify({
          ids: id,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.reload();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../less/expitem.less");
</style>